@use '@material/textfield' as mdc-textfield;
@use '@material/floating-label' as mdc-floating-label;
@use '@material/notched-outline' as mdc-notched-outline;
@use '@material/line-ripple' as mdc-line-ripple;
@use './form-field-sizing';
@use './form-field-subscript';
@use './form-field-focus-overlay';
@use './form-field-native-select';
@use './mdc-text-field-textarea-overrides';
@use './mdc-text-field-structure-overrides';
@use '../mdc-helpers/mdc-helpers';

// Base styles for MDC text-field, notched-outline, floating label and line-ripple.
@include mdc-textfield.without-ripple(
  $query: mdc-helpers.$mat-base-styles-without-animation-query);
@include mdc-floating-label.core-styles(
  $query: mdc-helpers.$mat-base-styles-without-animation-query);
@include mdc-notched-outline.core-styles(
  $query: mdc-helpers.$mat-base-styles-without-animation-query);
@include mdc-line-ripple.core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query);

// MDC text-field overwrites.
@include mdc-text-field-textarea-overrides.private-text-field-textarea-overrides();
@include mdc-text-field-structure-overrides.private-text-field-structure-overrides();

// Include the subscript, focus-overlay and native select styles.
@include form-field-subscript.private-form-field-subscript();
@include form-field-focus-overlay.private-form-field-focus-overlay();
@include form-field-native-select.private-form-field-native-select();

// Host element of the form-field. It contains the mdc-text-field wrapper
// and the subscript wrapper.
.mat-mdc-form-field {
  display: inline-flex;
  // This container contains the text-field and the subscript. The subscript
  // should be displayed below the text-field. Hence the column direction.
  flex-direction: column;
  // This allows the form-field to shrink down when used inside flex or grid layouts.
  min-width: 0;
}

// Container that contains the prefixes, infix and suffixes. These elements should
// be aligned vertically in the baseline and in a single row.
.mat-mdc-form-field-flex {
  display: inline-flex;
  align-items: baseline;
  box-sizing: border-box;
  width: 100%;
}

// The MDC text-field should stretch to the width of the host `<mat-form-field>` element.
// This allows developers to control the width without needing custom CSS overrides.
.mat-mdc-text-field-wrapper {
  width: 100%;
}

// Vertically center icons.
.mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field-icon-suffix {
  align-self: center;
  // The line-height can cause the prefix/suffix container to be taller than the actual icons,
  // breaking the vertical centering. To prevent this we set the line-height to 0.
  line-height: 0;
}

// The prefix/suffix needs a little extra padding between the icon and the infix. Because we need to
// support arbitrary height input elements, we use a different DOM structure for prefix and suffix
// icons, and therefore can't rely on MDC for these styles.
.mat-mdc-form-field-icon-prefix,
[dir='rtl'] .mat-mdc-form-field-icon-suffix {
  padding: 0 form-field-sizing.$mat-form-field-icon-prefix-infix-padding 0 0;
}
.mat-mdc-form-field-icon-suffix,
[dir='rtl'] .mat-mdc-form-field-icon-prefix {
  padding: 0 0 0 form-field-sizing.$mat-form-field-icon-prefix-infix-padding;
}

.mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field-icon-suffix {
  & > .mat-icon {
    padding: 12px;
  }
}

// Infix that contains the projected content (usually an input or a textarea). We ensure
// that the projected form-field control and content can stretch as needed, but we also
// apply a default infix width to make the form-field's look natural.
.mat-mdc-form-field-infix {
  // Prevent extra height from being added around the textarea, which throws off the overall
  // height of the form-field
  line-height: 0;
  flex: auto;
  min-width: 0;
  width: form-field-sizing.$mat-form-field-default-infix-width;
  // Needed so that the floating label does not overlap with prefixes or suffixes.
  position: relative;
  box-sizing: border-box;
}

.mat-mdc-form-field-hint-end {
  order: 1;
}

// In order to make it possible for developers to disable animations for form-fields,
// we only activate the animation styles if animations are not explicitly disabled.
.mat-mdc-form-field:not(.mat-form-field-no-animations) {
  @include mdc-textfield.without-ripple($query: animation);
  @include mdc-floating-label.core-styles($query: animation);
  @include mdc-notched-outline.core-styles($query: animation);
  @include mdc-line-ripple.core-styles($query: animation);
}
